<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的群聊</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%; min-width: 260px;  overflow: hidden; }
/*顶部*/
.page-top{ position: absolute;top:0;left: 0;  height: 86px; width: 100%;z-index: 999; background:#fff; overflow: hidden; }
.page-top .top-nav{ width: 100%;  height: 50px;  }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px;   }
.g-other{float: right;width: 80px; height: 50px;  }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center;  }
#searchBar{ background: #fff; border:0; }
.weui-search-bar:before{ height: 0;width: 0 }
.weui-search-bar:after{ height: 0;width: 0 }
.weui-search-bar__label,.weui-search-bar__box{ background: #f3f4f9;  }
.weui-search-bar{ padding-top: 0; }
/*内容容器*/
.page-wrap{position: absolute;top:0;left: 0; padding: 96px 0 0 0; height: 100%; width: 100%;  background:#f8f8f8;overflow-y: auto; }
/*内容样式*/
.qun-list{display:block;  width: 100%; overflow: hidden; background: #fff;  }
.qun-list div{padding:10px 15px 10px 60px;height: 60px; width:100%;border-bottom: 1px solid #f2f2f2; }
.qun-name{ height: 20px;  font-size: 15px; color: #393939; }
.qun-class{height: 20px;  font-size: 13px; color: #a1a1a1; }
.bg1{ background: url(../img/ql_03.png) 15px center no-repeat; background-size: 40px; }
.qun-num{line-height: 55px; font-size: 15px; color: #989898; text-align: center; }
/*底部信息*/
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 auto;border-radius: 3px; background: #2bb1ff; color:#fff; 
  text-align: center; font-size: 15px;}
</style>
</head>
<body style="background: #f3f4f9;">
<div class="page-container">
           <!-- 头部 -->
            <div class="page-top">
                    <div class="top-nav" >
                            <a  href="javascript:history.back(-1);" class="g-back"></a>     
                            <a  class="g-other"></a>                
                            <span class="t-title">通讯录</span>                                                 
                    </div>
                    <div class="top-search" style="width:100%;">
                           <div class="weui-search-bar" id="searchBar" >
                                <form class="weui-search-bar__form">
                                      <div class="weui-search-bar__box">
                                            <i class="weui-icon-search"></i>
                                            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                      </div>
                                      <label class="weui-search-bar__label" id="searchText">
                                            <i class="weui-icon-search"></i>
                                            <span>搜索</span>
                                      </label>
                                </form>
                                <!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
                          </div>
                    </div>
            </div>

      <!-- 内容区 -->
           <div class="page-wrap"  id="p-content">

                    <div id="qun-wrap">
                           <!-- 群列表数据动态渲染 -->
                    </div>
                    <p class="qun-num">共<span id="q-num">2</span>个群聊</p>
                    <div class="botm">
                          <a href="jianqun.html">新 建</a>
                    </div>
  	        </div>
</div>
</body>
<script>
var arr = [
     { name:"班级交流室", text:"高中部一年级一班", num:67, href:"qunliaoye.html" },
     { name:"班级交流室", text:"高中部一年级二班", num:69, href:"qunliaoye.html" },
     { name:"班级交流室", text:"高中部一年级三班", num:9, href:"qunliaoye.html" },
     { name:"班级交流室", text:"高中部一年级四班", num:23, href:"qunliaoye.html" },
     { name:"班级交流室", text:"高中部一年级五班", num:112, href:"qunliaoye.html" }
];

var strarr = [];
$.each( arr, function(i,v){
       strarr.push(
             '<a class="qun-list" href="'+v.href+'">'+
                          '<div class="bg1">'+
                               '<p class="qun-name">'+v.name+'(<span>'+v.num+'</span>)</p>'+
                               '<p class="qun-class">'+v.text+'</p>'+                   
                          '</div>'+
            '</a>'
        );
})
$("#qun-wrap").html( strarr.join(""));

// 置顶效果
$(".qun-list").eq(0).css("background","#f2f2f2");
// 群聊个数
$("#q-num").text( $(".qun-list").length )
// 底部导航点击
$(".footer").find('a').click(function(){
     $(".footer").find('a').removeClass("active");
     $(this).addClass("active")
})
// 每项点击
$(".p-list").click(function(){
     if( $(this).find('i').hasClass("g-down")){
             $(this).find('i').removeClass("g-down").addClass("g-left");
             $(this).next('ul').slideUp();
     }else{
             $(this).find('i').removeClass("g-left").addClass("g-down");
             $(this).next('ul').slideDown();
     }
})
// 搜索设置
$("#searchInput")[0].oninput=function () {
    var value =$.trim( $("#searchInput").val() );      
    var  strSelect = [];
    if( value){
          $.each(arr,function(i,v){
               if( v.name.match(value) || v.text.match(value) ){
                      var str1 = v.name.replace( value, '<mm style="color:red;">'+value+'</mm>')
                      var str2 = v.text.replace( value, '<mm style="color:red;">'+value+'</mm>')
                      strSelect.push(
                            '<a class="qun-list" href="'+v.href+'">'+
                                        '<div class="bg1">'+
                                             '<p class="qun-name">'+str1+'(<span>'+v.num+'</span>)</p>'+
                                             '<p class="qun-class">'+str2+'</p>'+                   
                                        '</div>'+
                           '</a>'
                      );
               }
          })
          $("#qun-wrap").html( strSelect.join(""));
     }else{
          $("#qun-wrap").html( strarr.join(""));
     }
}

</script>

</html>